<template>
  <div class="tab_container">
    <div class="tab_bar">
      <div class="bg_list">
        <div
          v-for="(item, i) in dateList"
          :key="i"
          :style="{
            'background-color': item.isActive ? item.subColor : 'transparent',
            transition: `transform ${item.transitionTime}s linear`,
          }"
          :class="{
            active: item.isActive,
            cover: i === currentTabIndex,
          }"
          class="bg_item"
        ></div>
      </div>
      <div class="content_list">
        <div
          v-for="(item, i) in dateList"
          :key="i"
          :style="{
            color: item.activeColor,
          }"
          :class="{
            active: i === currentTabIndex,
          }"
          class="content_item"
          @click="tabClickMethod(item, i)"
        >
          <span>{{ item.text }}</span>
          <!-- 选中的tab -->
          <div
            v-if="i === currentTabIndex"
            :style="{
              'background-color':
                i === currentTabIndex ? item.activeColor : 'transparent',
            }"
            class="inner_tab"
          >
            <!-- 今日图标 -->
            <span v-if="currentDate === item.date" class="today_icon">今</span>
            <!-- 星期显示 -->
            <span>{{ item.text }}</span>
            <!-- 右下角日期显示 -->
            <span class="date_box">
              {{ item.date ? item.date.slice(-5) : "" }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="tab_controller d_f j_c a_c">
      <el-tooltip content="上一周" placement="top">
        <arrow-left-bold
          @click="goWeekMethod(-1)"
          class="tab_btn mr_s without-outline"
        />
      </el-tooltip>
      <el-tooltip content="下一周" placement="top">
        <arrow-right-bold
          @click="goWeekMethod(1)"
          class="tab_btn without-outline"
        />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from "vue";
import { useGetters, useState } from "../store/useMapper";
let timer = null;

export default {
  name: "ColorTabs",
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const $moment = proxy.$moment;
    // 当前的日期
    // const currentDate = ref(null);
    const storeGetters = useGetters(["currentDate"]);
    console.log("storeGetters", storeGetters);

    // const storeState = useState("user", ["token"]);
    const storeState = useState(["collapse"]);
    console.log("storeState", storeState);

    // 当前选中的Tab下标
    const currentTabIndex = ref(0);
    // 上次点击的Tab下标
    let lastClickTabIndex = 0;
    const dateList = reactive([
      {
        text: "星期一",
        value: 1,
        activeColor: "rgb(50, 130, 255)", // 海蓝
        // subColor: 'rgb(152, 192, 255)',
        subColor: "rgb(211,229,253)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
      {
        text: "星期二",
        value: 2,
        activeColor: "rgb(101, 59, 183)", // 姹紫
        // subColor: 'rgb(178, 157, 219)',
        subColor: "rgb(223,215,238)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
      {
        text: "星期三",
        value: 3,
        activeColor: "rgb(157, 44, 178)", // 木槿
        // subColor: 'rgb(206, 149, 216)',
        subColor: "rgb(231,213,237)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
      {
        text: "星期四",
        value: 4,
        activeColor: "rgb(225, 67, 152)", // 桃粉
        // subColor: 'rgb(240, 161, 203)',
        subColor: "rgb(243,216,231)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
      {
        text: "星期五",
        value: 5,
        activeColor: "rgb(161, 103, 66)", // 棕褐
        // subColor: 'rgb(208, 179, 160)',
        subColor: "rgb(235,225,216)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
      {
        text: "星期六",
        value: 6,
        activeColor: "rgb(135, 152, 162)", // 玄灰
        // subColor: 'rgb(195, 203, 208)',
        subColor: "rgb(233,234,236)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
      {
        text: "星期日",
        value: 0,
        activeColor: "rgb(237, 124, 48)", // 桔橙
        // subColor: 'rgb(246, 189, 151)',
        subColor: "rgb(248,231,213)",
        isActive: false,
        transitionTime: 0.8,
        date: "",
      },
    ]);

    // 根据周一的日期，重新设定周一到周日的日期
    const setWeekDateListMethod = (firstDateInWeek, isInit = false) => {
      const weekDateList = [];
      weekDateList.push(firstDateInWeek);
      for (let i = 1; i <= 6; i++) {
        const weekDate = $moment(firstDateInWeek)
          .add(i, "days")
          .format("YYYY-MM-DD");
        weekDateList.push(weekDate);
      }
      if (isInit) {
        // 初始化时，默认设定当前日期为选中日期
        dateList.forEach((item, index) => {
          // 赋值日期
          item.date = weekDateList[index];
          // 设置当前激活项
          if (item.date === storeGetters.currentDate) {
            item.isActive = true;
            currentTabIndex.value = index;
            context.emit("onTab", item.date);
          }
        });
      } else {
        // 不是初始化，设定周一为选中日期，刷新列表
        dateList.forEach((item, index) => {
          // 赋值日期
          item.date = weekDateList[index];
          // 设置当前激活项
          if (item.date === firstDateInWeek) {
            item.isActive = true;
            currentTabIndex.value = index;
            context.emit("onTab", item.date);
          }
        });
      }
    };

    // 点击tab
    const tabClickMethod = (item, index) => {
      if (index === currentTabIndex.value || timer) return;
      lastClickTabIndex = currentTabIndex.value;
      currentTabIndex.value = index;
      item.transitionTime = 0.8;
      dateList[currentTabIndex.value].isActive = true;
      // 设定动画加载完毕才能点击
      timer = setTimeout(() => {
        item.transitionTime = 0;
        dateList[lastClickTabIndex].isActive = false;
        timer = null;
      }, 800);
      context.emit("onTab", item.date);
    };

    // 点击后退/前进一周
    const goWeekMethod = (type) => {
      context.emit("goWeek", type);
    };

    // 获取当前选中的日期
    const getActiveTabDate = () => {
      let date = null;
      dateList.forEach((item, i) => {
        if (i === currentTabIndex.value) {
          date = item.date;
        }
      });
      return date;
    };

    // ------------------------ 初始化 ----------------------------
    // 当前日期
    // storeGetters.currentDate = $moment().format("YYYY-MM-DD");
    // 获取当前周的第一天的日期
    const firstDateInWeek = $moment().weekday(0).format("YYYY-MM-DD");
    setWeekDateListMethod(firstDateInWeek, true);

    return {
      dateList,
      currentTabIndex,
      ...storeGetters,
      tabClickMethod,
      goWeekMethod,
      setWeekDateListMethod,
      getActiveTabDate,
    };
  },
};
</script>

<style lang="less" scoped>
.tab_container {
  height: 50px;
  padding-top: 12px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background: #fff;
  display: flex;

  .tab_bar {
    flex: 1;
    position: relative;
    height: 38px;
  }

  .tab_controller {
    margin-left: 20px;
  }

  .tab_btn {
    border-radius: 4px;
    padding: 2px 4px;
    color: #f56c6c;
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
    &:hover {
      opacity: 0.6;
    }
    &:active {
      background: #f2f2f2;
    }
  }

  .bg_list {
    height: 38px;
    width: 100%;
    display: flex;
    overflow: hidden;
    .bg_item {
      flex: 1;
      position: relative;
      &.active {
        transform: scaleX(15);
      }
      &.cover {
        z-index: 1;
      }
    }
  }
  .content_list {
    height: 38px;
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    user-select: none;
    .content_item {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      &:hover > span {
        opacity: 0.6;
      }
    }
    .inner_tab {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 125%;
      width: 100%;
      transform-origin: 50% 100%;
      transform: perspective(300px) skew(0, 0) rotate3d(1, 0, 0, 270deg);
      animation: tab_active_ani 0.5s linear both;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 4px -4px 10px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
    }
    .date_box {
      position: absolute;
      right: 4px;
      bottom: 4px;
      color: #fff;
      font-size: 13px;
    }
    .today_icon {
      position: absolute;
      left: -16px;
      top: -8px;
      color: #fff;
      font-size: 12px;
      background: #409eff;
      padding: 10px 15px 2px;
      transform: rotate(-45deg);
      font-weight: 600;
    }
  }
}

@keyframes tab_active_ani {
  0% {
    transform: perspective(300px) skew(0, 0) rotate3d(1, 0, 0, 270deg);
    opacity: 0;
  }
  100% {
    transform: perspective(300px) skew(-5deg, 0) rotate3d(1, 0, 0, 360deg);
    opacity: 1;
  }
}
</style>
